import React,{Component} from 'react'
import './index.scss'
import menuList from '../../config/menuConfig'
import memoryUntils from '../../untils/memoryuntils'
import storageUtils from '../../untils/storageUtils'
import Util from '../../untils/utils'
import jsonp from '../../api/jsonp'
import {Modal} from 'antd'
import {withRouter} from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

class Header extends Component{
    constructor(props){
        super();
        this.state={
            dayPictureUrl:'',
            weather:''
        }
    }
    getTime=()=>{
        setInterval(()=>{
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000)
    }
    
    getWeatherAPIData=()=>{
    let city = '北京';
    jsonp({
        url:'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
    }).then((res)=>{
        if(res.status === 'success'){
            let data = res.results[0].weather_data[0];
            this.setState({
                dayPictureUrl:data.dayPictureUrl,
                weather:data.weather
            })
        }
    })}

    getTitle=()=>{
        //首先得到当前请求路径,location在非路由组件中不存在，所以引用withRouter 
        // eslint-disable-next-line
        let title 
        const path =this.props.location.pathname;
        menuList.forEach(item=>{
            if(item.key===path){
                title=item.title;
            }else if(item.children){
              const cItem=  item.children.find(cItem=>cItem.key===path)
              if(cItem){
                  title=cItem.title
              }
            }
        })
        return title
    }

    logout=()=>{
        console.log('111')
        confirm({
            title: '确定要退出吗？',
            icon: <ExclamationCircleOutlined />,
                    
            onOk() {
              storageUtils.deleteUser()
              memoryUntils.user={}
            window.location.href = '/login';
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }
    componentDidMount(){
        // this.getWeatherAPIData();
        this.getTime();  
      }
        
        
   
    render(){
        // const user =memoryUntils.user;
        // console.log("user:"+user)

        const title=this.getTitle();
        return(        
        <div className="header">
           <div className="header-top">
            <span>欢迎，admin
            <a href="javascipt:?" onClick={this.logout}>退出</a>
          </span>     
           </div>
           <div className="header-bottom">
            <div className="header-bottom-left">
                {/* 同样也可以使用redux来实现 */}
                {title}</div>

        <div className="header-botton-right">
        <span >{this.state.sysTime}</span>
         <img src={this.state.dayPictureUrl} alt="404"/> 
        <span>{this.state.weather}</span> 
        {/* 百度天气的api使用到期，读者可以自行在百度天气申请 */}
    
        </div>
         </div>  
           </div>

        )
    }
}

export default  withRouter(Header)